<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('博客管理')"/>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>分类：</label>
                            <select  data-placeholder="请选择栏目" id="channelId" name="channelId"
                                    required>
                                <option value="">请选择</option>
                                <option th:each="channel:${channelList}"
                                        th:value="${channel.id}"
                                        th:text="${channel.name} + (${channel.type == 2} ? '-专题':'-分类')"
                                ></option>
                            </select>
                        </li>
                        <li>
                            <label>标题：</label>
                            <input type="text" name="title"/>
                        </li>

                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <!--            <a class="btn btn-success" href="#" th:href="@{/mto/post/add}" shiro:hasPermission="mto:post:add">-->
            <!--                <i class="fa fa-plus"></i> 新增-->
            <!--            </a>-->
            <a class="btn btn-success" onclick="$.operate.addTab()" shiro:hasPermission="mto:post:add">
                <i class="fa fa-plus"></i> 添加
            </a>

            <a class="btn btn-primary single disabled" onclick="$.operate.editTab()"
               shiro:hasPermission="mto:post:edit">
                <i class="fa fa-edit"></i> 修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()"
               shiro:hasPermission="mto:post:remove">
                <i class="fa fa-remove"></i> 删除
            </a>
            <a class="btn btn-info " onclick="$.table.importMarkdown()" shiro:hasPermission="mto:post:import">
                <i class="fa fa-upload"></i> 导入
            </a>
            <a class="btn btn-warning"  onclick="exportSelected()" shiro:hasPermission="mto:post:exportDataBatch">
                <i class="fa fa-download"></i> 导出
            </a>
            <a class="btn btn-danger"  onclick="cleasrStaticPage()" shiro:hasPermission="mto:post:cleasrStaticPage">
                <i class="fa fa-trash"></i> 清空缓存
            </a>
        </div>
        <div class="col-sm-12 select-table ">
            <table id="bootstrap-table" class="table table-bordered" data-resizable="true"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-table-resizable-js"/>
<script th:inline="javascript">
    var selectDtail = [[${@permission.hasPermi('mto:post:selectDetail')}]];
    var exportData = [[${@permission.hasPermi('mto:post:export')}]];
    var editFlag = [[${@permission.hasPermi('mto:post:edit')}]];
    var removeFlag = [[${@permission.hasPermi('mto:post:remove')}]];
    var prefix = ctx + "mto/post";

    $(function () {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            channelUrl: prefix + "/channel/list",
            viewUrl: prefix + "/view/{id}",
            selectUrl: prefix + "/selectById/{id}",
            importUrl: prefix + "/importData",
            cleasrStaticPage: prefix + "/cleasrStaticPage",
            modalName: "文章管理",
            showPageGo: true,
            columns: [{
                checkbox: true
            },
                {
                    field: 'id',
                    title: 'id',
                    visible: false,  // 隐藏某列（列选项可见）
                    ignore: true,    // 列选项不可见
                },
                {
                    field: 'number',
                    title: '序号',
                    width: '30',
                    formatter: function (value, row, index) {
                        let param = $('#bootstrap-table').bootstrapTable('getOptions');
                        let pageSize = param.pageSize;
                        let pageNumber = param.pageNumber;
                        return (pageNumber - 1) * pageSize + index + 1;
                    }
                },
                {
                    field: 'title',
                    title: '标题',
                    width: '210',
                    formatter: function (value, row, index) {
                        return '<a href="javascript:void(0)" onclick="$.operate.view(\'' + row.id + '\')">' + value + '</a>';
                    }
                },
                {
                    field: 'summary',
                    title: '摘要',
                    width: '250',
                    formatter: function (value, row, index) {
                        return $.table.tooltip(value, 18, "open");
                    }
                }, {
                    field: 'thumbnail',
                    title: '首图',
                    formatter: function (value, row, index) {
                        return $.table.imageView(value);
                    }
                },
                // {
                //     field: 'updateTime',
                //     title: '发表日期'
                // },
                {
                    field: 'tags',
                    title: '标签'
                },
                {
                    field: 'views',
                    title: '浏览',
                    align: 'center',
                    width: '30',
                },
                {
                    field: 'slider',
                    title: '轮播',
                    align: 'center',
                    width: '30',
                    formatter: function (value, item, index) {
                        if (item.slider == 0) {
                            return '<span class="label label-warning">否</span>';
                        } else if (item.slider == 1) {
                            return '<span class="label  label-success">是</span>';
                        }

                    }
                },
                {
                    field: 'featured',
                    title: '推荐',
                    align: 'center',
                    width: '30',
                    formatter: function (value, item, index) {
                        if (item.featured == 0) {
                            return '<span class="label label-warning">否</span>';
                        } else if (item.featured == 1) {
                            return '<span class="label label-success">是</span>';
                        }

                    }
                },
                {
                    field: 'status',
                    title: '状态',
                    align: 'center',
                    width: '40',
                    formatter: function (value, item, index) {
                        if (item.status == 0) {
                            return '<span class="label  label-success">发布</span>';
                        } else if (item.status == 1) {
                            return '<span class="label label-danger">草稿</span>';
                        }

                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + selectDtail + '" href="javascript:void(0)" onclick="$.operate.selectTab(\'' + row.id + '\')"><i class="fa fa-tv"></i> </a> ');
                        actions.push('<a class="btn btn-primary btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editTab(\'' + row.id + '\')"><i class="fa fa-edit"></i> </a> ');
                        actions.push('<a class="btn btn-warning btn-xs ' + exportData + '" href="javascript:void(0)" onclick="exportMD(\'' + row.id + '\',\'' + row.title + '\')"><i class="fa fa-download"></i> </a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i> </a>');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    });

    // 导出单个文章
    function exportMD(postId,title){
        console.log(postId)
        console.log(title)
        var dataParam =  { "postId": postId };
        var url =prefix + "/exportData/";
        var f1 = $.ajax({
            url: url,
            type: 'POST',
            data: dataParam,
            xhrFields: {
                responseType: 'blob'
            },
        })
        $.when(f1).then(function (content) {
            debugger
            var a = document.createElement('a')
            var blob = new Blob([content])
            var url = window.URL.createObjectURL(blob)
            a.href = url
            a.download = title+'.md';
            a.click()
            window.URL.revokeObjectURL(url)
        }, function () {
            $.modal.alertError("导出文章失败");
        })
    }

    // 导出多个博客
    function exportSelected() {
        var postIds = $.table.selectColumns("id");
        var dataParam = $("#export-form").serializeArray();
        dataParam.push({ "name": "postIds", "value": postIds });
        var url =prefix + "/exportDataBatch";
        var f1 = $.ajax({
            url: url,
            type: 'POST',
            data: dataParam,
            xhrFields: {
                responseType: 'blob'
            },
        })
        $.when(f1).then(function (content) {
            debugger
            var a = document.createElement('a')
            var blob = new Blob([content])
            var url = window.URL.createObjectURL(blob)
            a.href = url
            a.download = '博客导出.zip';
            a.click()
            window.URL.revokeObjectURL(url)
            $.modal.alertSuccess("成功导出");
        }, function () {
            $.modal.alertError("导出文章失败");
        })
    }

    // 清空静态页面
    function cleasrStaticPage() {
        var tipMsg = "确定清空静态页面么？";

        $.modal.confirm(tipMsg, function() {
            debugger
            $.post(prefix + "/cleasrStaticPage", {}, function(result) {
                if (result.code == web_status.SUCCESS) {
                    $.modal.msgSuccess("清除成功");
                } else {
                    $.modal.alertError(result.msg);
                }
            });
        });
    }


</script>
</body>
<!-- 导入区域 -->
<script id="importTpl" type="text/template">
    <form enctype="multipart/form-data" class="mt20 mb10">
        <div class="col-xs-offset-1">
            <input type="file" multiple id="file" name="markDownList"/>
            <div class="mt10 pt5">
                <input type="checkbox" id="updateSupport" name="updateSupport" title="如果名称相同，是否更新这条数据。"> 是否更新相同名称的博客
            </div>
            <!--            <div>-->
            <!--                <div>导入须知</div>-->
            <!--                <div>1）博客中含有图片，目前只支持网络图片，不支持本地图片</div>-->
            <!--                <div>2）支持多文件同时导入</div>-->
            <!--            </div>-->

            <font color="red" class="pull-left mt10">
                提示：仅允许导入markdown格式文件！
            </font>
        </div>
    </form>
</script>
</html>
